<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>商城管理系统</title>
<#include "common/header.ftl"/>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.twbsPagination.min.js"></script>
    <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript">
    $(function () {
        $(".beginDate,.endDate").click(function () {
            WdatePicker();
        });
        $("#query").click(function () {
            $("#currentPage").val(1);
            $("#searchForm").submit();
        });

    $('#pagination').twbsPagination({
        totalPages : ${pageResult.totalPage}||1,
        startPage : ${pageResult.currentPage},
        visiblePages : 5,
        first : "首页",
        prev : "上一页",
        next : "下一页",
        last : "最后一页",
        onPageClick : function(event, page) {
            $("#currentPage").val(page);
            $("#searchForm").submit();
        }
    });

    //编辑
    $(".auditClass").click(function(){
        $("#editform").clearForm("clear");
        $("#brandModal").modal("show");
        var data=$(this).data("json");
        $("#brandModal [name=id]").val(data.id);
        $("#brandModal [name=chineseName]").val(data.chineseName);
        $("#brandModal [name=englishName]").val(data.englishName);
        $("#brandModal [name=url]").val(data.url);
        $("#logoImage").prop("src",data.logo);
        $("#brandModal [name=area]").val(data.area);
        $("#brandModal [name=description]").val(data.description);
        $("#brandModal [name=sequence]").val(data.sequence);
        $("#brandModal [name=mods]").val(data.mods);
        if(data.mods==0){
            $("#noMods").prop("checked","checked");
        }else{
            $("#isMods").prop("checked","checked");
        }

        var ids=$.map(data.catalogList,function (item) {
            return item.id;
        });

        for (var i = 0; i < ids.length; i++) {
            $.each($(":checkbox"),function (index,item) {
                if(ids[i]==$(item).val()){
                    $("#"+$(item).val()).prop("checked","checked");
                }
            });
        }
    });

    //新增
    $("#add").click(function(){
        $("#editform").clearForm("clear");
        $("#brandModal").modal("show");
        $("#isMods").prop("checked","checked");
    });

    //取消
    $("#cancel").click(function(){
        $("#editform").clearForm("clear");
        $("#brandModal").modal("hide");
    });

    //保存
    $("#save").click(function (){
        $("#editform").ajaxSubmit(function(data){
            if(data.success){
                $.messager.confirm("提示","保存成功",function(){
                    window.location.reload();
                });
            }else {
                $.messager.confirm("提示",data.msg);
            }
        return false;
        });
    });

    //上传logo
    $("#uploadBtn").uploadify({
        swf:"/js/plugins/uploadify/uploadify.swf",
        buttonText:"选择logo",
        fileObjName:"image",
        fileTypeDesc:"logo",
        fileTypeExts:"*.gif; *.jpg; *.png",
        uploader:"/uploadImage",
        multi:false,
        overrideEvents:["onQueueComplete","onSelect"],
        onUploadSuccess:function(file,data){
            $("#logoImage").prop("src",data);
            $("[name=logo]").val(data);
        }
    });

    //删除
    $(".delClass").click(function(){
        var data=$(this).data("json");
        $.messager.confirm("提示","是否确认删除",function(){
            $.get("/delete?id="+data.id,function(s){
                if(s.success){
                    window.location.reload();
                    $.messager.confirm("提示","删除成功",function(){});
                }else {
                    $.messager.confirm("提示","删除失败");
                }
            },"json");
        });
    });
});
</script>
</head>
<body>
<div class="container">
<#include "common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
        <#assign currentMenu="brand" />
        <#include "common/menu.ftl" />
        </div>
        <div class="col-sm-9">
            <div class="page-header">
                <h3>品牌管理</h3>
            </div>
            <form id="searchForm" class="form-inline" method="post" action="/brand">
                <input type="hidden" id="currentPage" name="currentPage" value="1"/>
                <div class="form-group">
                    <label>商品名</label>
                    <input class="form-control" type="text" name="brandName" value='${qo.brandName!''}'/>
                </div>
                <div class="form-group">
                    <button id="query" type="button" class="btn btn-success"><i class="icon-search"></i> 查询</button>
                </div>
                <div class="form-group">
                    <button id="add" type="button" class="btn btn-success">新增</button>
                </div>
            </form>
            <div class="panel panel-default">
                <table class="table">
                    <thead>
                        <tr>
                            <th>品牌名称</th>
                            <th>品牌网址</th>
                            <th>品牌简述</th>
                            <th>排序</th>
                            <th>显示</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">
                        <#list pageResult.listData as item>
                            <tr>
                                <td>${item.chineseName}</td>
                                <td>${item.url}</td>
                                <td>${item.description}</td>
                                <td>${item.sequence}</td>
                                <td>${item.isMods}</td>
                                <td>
                                    <a href="javascript:;" data-json='${item.jsonString}' class="auditClass">编辑</a>
                                    <a href="javascript:;" data-json='${item.jsonString}' class="delClass">删除</a>
                                </td>
                            </tr>
                        </#list>
                    </tbody>
                </table>
                <div style="text-align: center;">
                    <ul id="pagination" class="pagination"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="brandModal" data-backdrop="static" aria-hidden="true" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body" style="margin-left: 200px">
                <form class="form-horizontal" id="editform" method="post" action="/brand_save">
                    <fieldset>
                        <div id="legend" class="">
                            <legend>编辑/新增</legend>
                        </div>
                        <input type="hidden" name="id" value="" />
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="chineseName">品牌名称:</label>
                            <div class="col-sm-6">
                                <input type="text" style="width: 70%" class="form-control" name="chineseName" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="chineseName">英文名:</label>
                            <div class="col-sm-6">
                                <input type="text" style="width: 70%" class="form-control" name="englishName" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="catalogId">商品分类:</label></br>
                                <div class="checkbox" style="margin-left:80px;margin-top:-20px">
                                <#list catalog as item>
                                    <label style="margin-left: 10px">
                                        <input type="checkbox" id="${item.id}" name="catalogId" value="${item.id}">${item.name}
                                    </label>
                                </#list>
                                </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="url">品牌网址:</label>
                            <div class="col-sm-6">
                                <input type="text" style="width: 70%" class="form-control" name="url" />
                                品牌网址的全路径（带上http://）
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="area">品牌所在地:</label>
                            <div class="col-sm-6">
                                <select class="combobox" name="area" style="width: 120px;height: 30px">
                                    <option value="其它地区">其它地区</option>
                                    <option value="中国">中国</option>
                                    <option value="欧美">欧美</option>
                                    <option value="日韩">日韩</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="idCardItem">
                                <label class="col-sm-2 control-label" for="logo">品牌logo:</label>
                                <div>
                                    <a href="javascript:;" id="uploadBtn">logo</a>
                                </div>
                                <img alt="" style="margin-left:130px;margin-top: -30px"
                                     src="" class="uploadImg" id="logoImage" />
                                <input type="hidden" name="logo"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="description">品牌描述:</label>
                            <div class="col-sm-6">
                                <textarea style="width: 70%" name="description" rows="4" cols="60"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="sequence">排序:</label>
                            <div class="col-sm-6">
                                <input type="text" style="width: 20%" class="form-control" name="sequence" />
                            </div>
                        </div>
                        <div class="form-group">
                                <label class="col-sm-2 control-label" for="mods">是否显示:</label>
                            <div class="radio">
                                    <label>
                                        <input type="radio" id="isMods" name="mods" value="1">是
                                    </label>
                                    <label>
                                        <input type="radio" id="noMods" name="mods" value="0">否
                                    </label>
                                <span style="font-size: 12px">(当品牌下还没有商品的时候，首页及分类页的品牌区将不会显示该品牌)</span>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success btn_audit" id="save">保存</button>
                <button type="button" class="btn btn-warning btn_audit" id="cancel">取消</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>